<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head><title>WORKING test</title>

<!--
<script src="http://www.google.com/jsapi?key=ABQIAAAANU8OAqbJPAHXV4SpKuTEvhQx6TWrfC8bNfnC-vtzzHJYkwhD6xSt50-Z_44EojojRLDiBj3kn932Rw" type="text/javascript"></script>
-->
<!--
TODO:
    0) After looking from 30 days to today, need to collect the last 4 days that have entries or some such
    1) Need to conquer multiple queries
    2) How do I check calendar for past WOTD? gcal goes back to epoch
	3) Automated accordion display
	4) Include QOTD - read from multiple calendars
	5) Each panel should have its own timer
    6) Separate positioning CSS from styling CSS
    7) after #6, produce several themes
	8) Get working with jsapi key??

  Panel Types:
    wotd
    last three days
    qotd
    announce
-->
<style type="text/css">
html, body  {height: 99%; font-family: "Trebuchet MS",sans-serif; background-color: #000000; color: #bbbbbd; text-align:center;}
.largeItem  { font-size:216px; }
.mediumItem { font-size:96px; } 
.smallItem  { font-size:36px; }
#container { position: relative; min-height: 100%; }
#footer { position: absolute; bottom: 10px; left: 0%; right: 0%; font-size:36px; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date-en-US.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "2.x", {packages: ["calendar"]});

var wotdPanels = [ ];
var wotdCurrentPanel = 0;
var dwellTime = 9000;
var fadeTime = 600;

var callback = function (result) {
    var entries = result.feed.getEntries();
    var uniqueDates = new Object;
    var eventEntry = entries[0];
    var eventTitle = eventEntry.getTitle().getText();
    wotdPanels.push('<div class="display"><div class="largeItem">' + eventTitle + '</div><div id="footer">Word of the Day</div></div>');

    for (i = 1; i < entries.length; i++) { // Skip the first one
        var eventEntry = entries[i];
        var eventTitle = eventEntry.getTitle().getText();
        var startDateTime = null;
        var eventDate = null;
     
        var times = eventEntry.getTimes();
        startDateTime = times[0].getStartTime();
        eventDate = startDateTime.getDate();
        var hDate = Date.parse(eventDate);
        var eventDisplayDate = hDate.toString("dddd, MMMM dS");


        if (eventDisplayDate in uniqueDates) {
            uniqueDates[eventDisplayDate] = uniqueDates[eventDisplayDate] + '<br/>' + eventTitle;
        } else {
            uniqueDates[eventDisplayDate] = eventTitle;
        }
        if (i > 1) {
            break;
        }
    }
    $.each(uniqueDates, function(key, value) {
        wotdPanels.push('<div class="display"><div class="largeItem">' + value + '</div><div id="footer">Word of the Day: ' + key + '</div></div>');
    });
    
    $(function () {
        $('div.display').replaceWith(wotdPanels[wotdCurrentPanel]);
        wotdCurrentPanel++;
        setInterval(update, dwellTime);
        function update() {
            $('div.display').fadeOut(fadeTime,function(){
                if(wotdCurrentPanel >= wotdPanels.length) {
                    wotdCurrentPanel = 0;
                    location.reload(); // Reload
                } else {
                    $('div.display').replaceWith(wotdPanels[wotdCurrentPanel]);
                }
                wotdCurrentPanel++;
            })
        }

    });
};
    
// Error handler to be invoked when getEventsFeed() produces an error
var handleError = function (error) {
    $('div.display').replaceWith('<pre>' + error + '</pre>');
};

function _run() {
    var feedUrl = "https://www.google.com/calendar/feeds/u6g675oejpdha4pncv50rmi8tc%40group.calendar.google.com/public/full";
    var maxResults = 30;
    var daysBack = -30;
    var calendarService = new google.gdata.calendar.CalendarService('LiquidChicken-wotdDisplayer-1.0');
    var query = new google.gdata.calendar.CalendarEventQuery(feedUrl);
    query.setOrderBy('starttime');
    query.setSortOrder('descending');
    var maxDate = new google.gdata.DateTime(Date.today());
    var minDate = new google.gdata.DateTime(Date.today().add({days: daysBack}));
    query.setMaximumStartTime(maxDate);
    query.setMinimumStartTime(minDate);
    query.setMaxResults(maxResults); // Keep us out of trouble
    calendarService.getEventsFeed(query, callback, handleError);
}

google.setOnLoadCallback(_run);
</script>
</head>

<body>
<div id="container">
  <div class="display">
      <div class="largeItem"/>
      <div id="footer"/>
  </div>
</div>
</body>
</html>
